<template>
    <Panel>
        <Tabs v-if="documents">
          <table>
              <thead class="table-header--white">
              <tr>
                  <th>Name</th>
                  <th>Type</th>
                  <th>Bill Date</th>
                  <th>Amount (USD)</th>
                  <th>Issued By</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="document in getDocumentsByType('utility_bill', 'Electric')">
                  <td>{{ document.name }}</td>
                  <td>{{ document.type }}</td>
                  <td>{{ document.bill_date }}</td>
                  <td>{{ document.amount }}</td>
                  <td>{{ document.issued_by }}</td>
              </tr>
              </tbody>
          </table>
            
        </Tabs>
    </Panel>
</template>
<script>
    import axios from 'axios'
    import dateFormat from 'dateformat'
    import Panel from './Panel.vue'
    import SecondaryTabs from './SecondaryTabs.vue'
    import Tab from './Tab.vue'
    import Tabs from './Tabs.vue'

    export default {

        components: {
            Panel,
            SecondaryTabs,
            Tab,
            Tabs
        },

        props: [
            'documents'
        ],

        data() {
            return {
            }
        },

        methods: {
            getDocumentsByType: function(type, category) {
                var documents = [];

                this.documents.forEach(document => {
                    if(document['doc_type'] == type && document['category'] == category) {
                        documents.push(document);
                    }
                });

                return documents;
            }
        }

    }
</script>
